<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-07-03 18:14:37
 * @LastEditTime: 2023-11-16 21:16:18
 * @LastEditors: sueRimn
-->

<template>
  <view class="item d-flex align-items-center justify-content-between" @click="$emit('onClick')">
    <view class='name'>{{ item.productName }}</view>
    <view class="d-flex">
      <view class='btn'>{{ item.categoryName }}</view>
      <view class='btn'>{{ item.brandName }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: { type: Object }
  },

}
</script>

<style lang="scss" scoped>
.item {
  border-bottom: 1px solid #f0f0f0;
  padding: 20rpx 0;

  .name {
    font-size: var(--hui-font-size-28);
    color: var(--hui-color-title);
    width: 400rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn {
    padding: 0 30rpx;
    margin: 0rpx 16rpx 0rpx 0;
    height: 50rpx;
    background: #f8f8f8;
    border-radius: 25rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: var(--hui-color-title);
    line-height: 50rpx;
    text-align: center;
  }
}
</style>